<style lang="scss" scoped>
.menuInfo-right-top {
  height: 32px;
}
.menuInfo-right-table {
  height: calc(100% - 32px);
}
</style>
<template>
  <div class="app-container-cust">
    <div style="display: flex; height: 100%">
      <!--菜单目录-->
      <div
        class="left-side"
        :style="{ width: leftSideWidth, overflowX: overflowX }"
      >
        <div v-show="leftSide" class="menu-tree">
          <div class="nav">
            <div class="tit-txt">
              {{ $t("authority.menuInfo.form.menuList") }}
            </div>
            <div>
              <svg-icon
                icon-class="left_arrows-circle"
                className="menu-tool-btn"
                @click="handleFold()"
              />

              <svg-icon
                v-if="expendTree"
                icon-class="up_circle"
                className="menu-tool-btn"
                @click="expandCollapseTree()"
              />
              <svg-icon
                v-if="!expendTree"
                icon-class="down-circle"
                className="menu-tool-btn"
                @click="expandCollapseTree()"
              />
              <svg-icon
                icon-class="search-circle_1"
                className="menu-tool-btn"
                @click="getTreeSelect()"
              />
              <!--              <i-->
              <!--                class="el-icon-refresh-right"-->
              <!--                @click="getTreeSelect()"-->
              <!--                style="margin-left: 10px"-->
              <!--              ></i>-->
            </div>
          </div>
          <div class="head-container">
            <el-tree
              :data="menuDirOptions"
              node-key="id"
              :props="defaultProps"
              :expand-on-click-node="false"
              ref="tree"
              default-expand-all
              @node-click="handleNodeClick"
              :render-content="renderContent"
            />
          </div>
        </div>
        <div class="fold-btn" v-show="!leftSide">
          <div @click="handleFold()">
            <svg-icon
              v-if="!leftSide"
              icon-class="right_arrows_circle"
              className="menu-tool-btn"
            />
          </div>
        </div>
      </div>
      <!--按钮数据-->
      <div class="right-table" :style="{ width: rightTableWidth + '%' }">
        <div class="app-container">
          <ht-table
            ref="dataTable"
            :dictMap="dictMap"
            :queryParams="queryParams"
            :tableBindColumns="tableBindColumns"
            :reqConfig="regConfig"
            :opButtonList="opButtonList"
          >
            <template v-slot:icon="slotProps">
              <svg-icon
                slot="prefix"
                :icon-class="slotProps.row.icon"
                class="el-input__icon"
              />
            </template>
            <template v-slot:operate>
              <el-table-column
                :label="$t('common.operate')"
                align="left"
                width="160"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['user:menuInfo:edit']"
                  >
                    {{ $t("common.edit") }}
                  </el-button>
                  <el-popconfirm
                    :title="$t('authority.menuInfo.form.delTitle')"
                    @confirm="handleDelete(scope.row)"
                  >
                    <el-button
                      size="mini"
                      type="text"
                      slot="reference"
                      v-hasPermi="['user:menuInfo:remove']"
                    >
                      {{ $t("common.delete") }}
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </template>
          </ht-table>
        </div>
      </div>
    </div>
    <menu-info-add
      v-if="addViewOpen"
      :parent-id="queryParams.id"
      @closeCallback="closeAddView"
    ></menu-info-add>
    <menu-info-update
      v-if="updateViewOpen"
      :menu-info="updateMenuInfo"
      @closeCallback="closeUpdateView"
    ></menu-info-update>
  </div>
</template>

<script>
import { listPageMixin } from "@/libs/listPageMixin";
import {
  apiUrlConfig,
  menuTree,
  remove,
} from "@/api/authority_app/menuInfo/index";
import menuInfoAdd from "./add";
import menuInfoUpdate from "./update";

export default {
  name: "MenuInfo",
  mixins: [listPageMixin],
  components: {
    menuInfoAdd,
    menuInfoUpdate,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      leftSide: true,
      leftSideWidth: 20,
      overflowX: "auto",
      rightTableWidth: 80,
      expendTree: true,
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 菜单目录数据
      menuDirOptions: undefined,
      opButtonList: () => {
        return [
          {
            label: this.$t("common.add"),
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:menuInfo:add",
            clickFun: () => {
              this.handleAdd();
            },
          },
        ];
      },
      regConfig: apiUrlConfig,
      // 列信息
      tableBindColumns: [
        {
          label: this.$t("authority.menuInfo.form.icon"),
          prop: "icon",
          customSlot: true,
        },
        {
          label: this.$t("authority.menuInfo.form.menuName"),
          prop: "menuName",
        },
        {
          label: this.$t("authority.menuInfo.form.orderNum"),
          prop: "orderNum",
        },
        { label: this.$t("authority.menuInfo.form.vuePath"), prop: "vuePath" },
        {
          label: this.$t("authority.menuInfo.form.menuType"),
          prop: "menuType",
          dictCode: "sys_menu_type",
        },
        {
          label: this.$t("authority.menuInfo.form.visible"),
          prop: "visible",
          dictCode: "sys_show_hide",
        },
        {
          label: this.$t("authority.menuInfo.form.busiType"),
          prop: "busiType",
          dictCode: "busiScope",
        },
        { label: this.$t("authority.menuInfo.form.perms"), prop: "perms" },
      ],
      // 查询参数
      queryParams: {
        id: "0",
      },
      // 新增页面 显示状态
      addViewOpen: false,
      // 编辑页面 显示状态
      updateViewOpen: false,
      // 编辑页面 编辑对象
      updateMenuInfo: {},
    };
  },
  created() {
    this.getTreeSelect();
    // this.getDicts("sys_menu_type").then((response) => {
    //   this.menuTypeOptions = response.result;
    // });
    // this.getDicts("sys_show_hide").then((response) => {
    //   this.visibleOptions = response.result;
    // });
  },
  methods: {
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      );
    },
    /** 收缩框按钮 */
    handleFold() {
      this.leftSide = !this.leftSide;
      if (this.leftSide) {
        this.leftSideWidth = "20%";
        this.rightTableWidth = 80;
      } else {
        this.leftSideWidth = "36px";
        this.rightTableWidth = 100;
      }
    },
    /** 展开收缩树 */
    expandCollapseTree() {
      this.expendTree = !this.expendTree;
      let nodes = this.$refs.tree.store.nodesMap;
      for (var i in nodes) {
        nodes[i].expanded = this.expendTree;
      }
    },

    /** 菜单下拉树数据获取 */
    getTreeSelect() {
      this.loading = true;
      menuTree().then((response) => {
        this.menuDirOptions = response.result;
        this.loading = false;
      });
    },
    /** 树 点击 事件 */
    handleNodeClick(data) {
      this.queryParams.id = data.id;
      this.doQuery();
    },
    /** 转义 */
    visibleFormat(row) {
      return this.selectDictLabel(this.visibleOptions, row.visible);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.addViewOpen = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      row.menuType = row.menuType + "";
      row.visible = row.visible + "";
      row.adminMenu = row.adminMenu + "";
      let tempRow = _.cloneDeep(row);
      this.updateMenuInfo = tempRow;
      this.updateMenuInfo.perms = tempRow.perms || "";
      this.updateMenuInfo.remark = tempRow.remark || "";
      this.updateViewOpen = true;
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.loading = true;
      remove(row.id)
        .then((response) => {
          this.loading = false;
          if (response.result === true) {
            // this.getTreeSelect();
            this.doQuery();
          }
        })
        .catch((res) => {
          this.loading = false;
        });
    },
    /** 关闭新增页面 */
    closeAddView(result) {
      this.addViewOpen = false;
      if (result) {
        this.doQuery();
        this.getTreeSelect();
      }
    },
    /** 关闭编辑页面 */
    closeUpdateView(result) {
      this.updateViewOpen = false;
      if (result) {
        this.doQuery();
        this.getTreeSelect();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.left-side {
  margin-right: 5px;
  display: flex;
  justify-content: space-between;
  overflow: auto;
  width: 220px;
  padding-bottom: 40px;
  .menu-tree {
    width: 100%;
    height: 100%;
    padding: 16px 0 30px 16px;
  }

  .fold-btn {
    width: 100%;
    padding: 16px 8px;
  }

  .nav {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    padding-bottom: 10px;
    .tit-txt {
      font-weight: 600;
    }
  }

  .head-container {
    height: 100%;
    overflow: auto;
    ::v-deep .el-tree-node.is-expanded > .el-tree-node__children {
      display: inline;
    }
  }
}
.right-table {
  min-width: 82%;
  max-width: 100%;
  padding-top: 16px;
  border-left: 1px solid #e7e7e7;
}
.app-container-cust {
  background-color: #ffffff;
  height: calc(100% - 24px);
  padding-bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 6px;
  -webkit-box-shadow: 0px 2px 3px #0000001a;
  box-shadow: 0px 2px 3px #0000001a;
}
.app-container {
  padding-top: 0px !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}
</style>
